<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理员登录</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../layui/js/global.js"></script>
    <script src="../../layui/js/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        #coent{
            width: 1500px;
            margin: 0 auto;

        }
        #header .conentist{
            width: 150px;

            height: 70px;

            float: left;

        }
        #header .daohang{
            width: 1350px;

            float: right;
        }
        #footer{
            background-image: url("../../layui/images/bgg.jpg");
            height: 180px;
            bottom:0;


        }
        #background{
            height: 900px;

        }
        #text-bg {
            position: absolute;
            right: 0;
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
            padding: 0;
            left: 0;
            text-align: center;
        }
        #h1 {
            font-size: 90px;
            line-height: 108px;
            text-transform: uppercase;
            color: #6c757d;
            font-weight: bold;
            padding-bottom: 35px;
            padding-top: 25px;
        }
        .white {
            color: #fff;
        }

        #read-more {
            justify-content: center;
            display: flex;
        }
        #read-more a {
            font-size: 17px;
            padding: 15px 30px;
            background-color: #ee580f;
            color: #fff;
            display: inline-block;
            line-height: 20px;
            border-radius: 30px;
            text-align: center;
            margin-top: 30px;
        }
        #read-more a:hover {
            background: #15cfe5;
        }
        #footer{
            background-color: #FFD700;
            height: 180px;

        }

        #div1{
            text-transform: uppercase;
            float: top;
            z-index: 1;
            position: relative;
        }
		#div2{
			margin: auto;
			width: 900px;
			height: 300px;
			text-align: center;
			background-color: aliceblue;
			opacity: 0.8
		}
    </style>
</head>
<body>
<div id="div1">
    <div class="layui-container"> </div>
</div>
<div id="coent">
    <header id="header">
        <div class="conentist">
            <img src="../../layui/images/logo.jpg">
        </div>
        <div class="daohang">
            <ul class="layui-nav" lay-filter="">
                <li class="layui-nav-item ">管理员登录界面</li>
            </ul>
        </div>
        <div style="clear: both;"></div>
    </header>
    <div id="background">
        <img src="../../layui/images/bg.jpg">
        <div id="text-bg">
            <div style="height: 150px">
                <div style="margin-top: 30px; width: 900px; padding: 300px; text-align: center;">
                    <div class="layui-row">
                        <div id="div2">
                            <div class="layui-col-md6 layui-col-md-offset3"style="background-color: #fff ;opacity: 1">
                                <h3 style="text-align: center;">管理员登录</h3>
                                <form class="layui-form" id="sysLoginForm" >
                                    <div class="layui-form-item" >
                                        <label class="layui-form-label"style="text-align: center">账号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" required  lay-verify="username" placeholder="请输入账号" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"style="text-align: center">密码</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="password" required lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block"style="text-align: center">
                                            <button class="layui-btn" lay-submit lay-filter="sysLoginSure">登录</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer">
        </footer>
    </div>
</div>




<script src="../../layui/layui.js"></script>
<script src="../../layui/js/sys/Login.js"></script>
<script>
    layui.use(['layer' ,'form'], function(){
        var layer = layui.layer;
        var form = layui.form ;
        initForm(layer , form) ;
        $("#butt").click(function() {
            layer.open({
                type: 1,
                title: "管理员登录",
                area: ['600px', '700px'],
                offset: '20px',
                content: $("#gb"),
                cancel: function() {
                    // 你点击右上角 X 取消后要做什么
                    setTimeout('window.location.reload()', 1);
                },
                success: function() {
                    form.on('submit(formDemo)', function(data) {

                    });
                }
            })
            form.render();
        })
    });
</script>
</body>
</html>